<template>
  <div class="withdraw">
    <div class="header">
      <pageHeader title="我的盈利"/>
    </div>
    <div class="top-box">
      <div class="flex flex-row flex-justify-between flex-align-center name">
        <span class="de-name">
          子寒售货机工厂
          <el-tooltip class="item" effect="dark" content="如需修改企业信息请负责人与客服联系" placement="top">
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </span>
        <span class="time">注册时间:2019-05-08</span>
      </div>
      <div class="flex flex-row flex-justify-between flex-align-center info">
        <div>
          <p>陈银毅</p>
          <p>收款人</p>
        </div>
        <div>
          <p>181****3262</p>
          <p>手机号码</p>
        </div>
        <div>
          <p>350****212</p>
          <p>身份证号</p>
        </div>
        <div>
          <p>6221****3573</p>
          <p>银行卡号</p>
        </div>
      </div>
    </div>
    <div class="price-info-box">
      <div class="flex-row flex-justify-between flex-align-center price-info-top">
        <div class="yue">
          <p class="price">8888.88</p>
          <p>账户余额（元）</p>
        </div>
        <div class="tixian-btn">
          <el-button @click="showDBox">提现</el-button>
        </div>
      </div>
      <div class="flex-row flex-justify-between flex-align-center price-info-bottom">
        <div>
          <p>9999.99</p>
          <p>累计收益（元）</p>
        </div>
        <div>
          <p>0</p>
          <p>待结算（元）</p>
        </div>
        <div>
          <p>3333.99</p>
          <p>服务费分成（元）</p>
        </div>
        <div>
          <p>6666.00</p>
          <p>流水分成（元）</p>
        </div>
      </div>
    </div>
    <div class="lists">
      <div class="list-header flex-row flex-justify-between flex-align-center">
        <div>交易记录</div>
        <div >
          <router-link to="/recording" style="color:#ff7d31;">查看记录</router-link>
        </div>
      </div>
      <div class="lists-content">
        <div
          class="content-item flex-row flex-justify-between flex-align-center"
          v-for="index in 10"
          :key="index"
          :style="{borderBottom:index==10?'0':''}"
        >
          <div>服务费分成+1</div>
          <div>2019-05-09</div>
        </div>
      </div>
    </div>
    <!--  -->
    <el-dialog title="立即提现" :visible.sync="centerDialogVisible" width="20%" center>
      <span style="width:100%;text-align: center;display:block;">
        <i class="el-icon-warning" style="color:red;"></i>如需更改提现资料，请负责人与客服联系
      </span>
      <div class="flex-column flex-justify-center flex-align-center">
        <div class="tixianjine">
          <span>账户余额：</span>
          <span>88888.88</span>
        </div>
        <div class="flex-row flex-justify-end flex-align-center price-box">
          <span>提现金额：</span>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
          <el-button>全部提现</el-button>
        </div>
        <div class="flex-row flex-justify-end flex-align-center mobile-box">
          <span>已绑定手机号：</span>
          <el-input value="18144113262" placeholder="请输入内容" :disabled="true"></el-input>
          <el-button>获取验证码</el-button>
        </div>
        <div class="flex-row flex-justify-start flex-align-center code-box">
          <span>验证码：</span>
          <el-input v-model="codeInput" maxlength='6' placeholder="请输入内容"></el-input>
        </div>
        <div class="tips">
          <p>1.人工审核，预计到账时间为三个工作日内</p>
          <p>2.提现金额需大于500元</p>
          <p>3.提现手续费为每笔1元</p>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">提 现</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageHeader from "@/components/pageHeader/index";
export default {
  props: {},
  data() {
    return {
      centerDialogVisible: false,
      input:"",
      codeInput:""
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    showDBox() {
      this.centerDialogVisible = !this.centerDialogVisible;
    }
  },
  components: {
    pageHeader
  }
};
</script>

<style scoped lang="less">
.withdraw {
  padding: 20px 40px;
  background: #ddd;

  .header {
  }
  .top-box {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 30px 15px;
    background: #fff;
    .name {
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      .time {
        color: #949494;
      }
    }
    .de-name {
      font-size: 24px;
      font-weight: 500;
    }
    .info {
      padding-top: 15px;
      div {
        p:nth-child(1) {
          color: #000;
          margin-bottom: 8px;
          font-size: 16px;
        }
      }
      font-size: 12px;
      color: #949494;
    }
  }
  .price-info-box {
    background: #fff;
    padding: 10px 10px;
    margin-top: 30px;
    .price-info-top {
      padding: 0 0 8px 30px;
      border-bottom: 1px solid #ccc;
      .yue {
        font-size: 14px;
        .price {
          font-size: 38px;
          font-weight: bolder;
          margin-bottom: 5px;
        }
      }

      .tixian-btn button {
        width: 100px;
        padding: 8px 0;
        background: #ff7d31;
        color: #fff;
        font-size: 12px;
      }
    }
    .price-info-bottom {
      padding: 10px 30px;
      div {
        p {
          margin-bottom: 10px;
          font-size: 14px;
        }
      }
    }
  }

  .lists {
    padding: 10px;
    background: #fff;
    margin-top: 20px;
    .list-header {
      padding: 20px 15px;
      border-bottom: 1px solid #ddd;
    }
    .lists-content {
      .content-item {
        font-size: 14px;
        color: #868686;
        padding: 15px 15px;
        border-bottom: 1px solid #ddd;
      }
    }
  }
  .tixianjine {
    margin: 10px 0;
    color: #cccc;
    span:nth-child(2){
      font-size: 24px;
    }
  }
  .price-box {
    width: 100%;
    margin-bottom: 20px;
    .el-input {
      width: 120px;
      height: auto;
      .el-input__inner {
        padding: 8px 15px;
      }
    }
    button {
      margin-left: 20px;
      width: 80px;
      padding: 10px 0;
    }
  }
  .mobile-box{
    width: 100%;
    margin-bottom: 20px;
    .el-input{
      width: 120px;
    }
     button {
       margin-left: 20px;
      width: 80px;
      padding: 10px 0;
    }
  }
  .code-box{
    width: 100%;
    margin-bottom: 20px;
    padding-left: 85px;
    box-sizing: border-box;
     .el-input{
      width: 120px;
    }
  }
  .tips {
    font-size: 12px;
    p{

      margin: 5px 0;
    }
  }
}
</style>
